<template>
  <div class="app dark">
    <header class="cool-header">
      <iframe style="margin-left: 20px;" width="350px" scrolling="no" height="25" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=1&color=%23FFFFFF&icon=1&py=hunnan&site=15"></iframe>
      <h4 style="margin-left: -200px;">东软空气质量环保公众监督平台</h4>
      <div class="datetime" ref="datetime" style="margin-right: 20px;"></div>
    </header>
    <section class="container">
      <!-- 左边部分 -->
      <section class="itemLeft sci-fi-border">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <ItemPage class="item-double-gauge" style="margin-top: 10px;">
          <ItemOne1 :value="50" :name="'SCORE 1'" :color="'#ff0000'"></ItemOne1>
          <ItemOne2 :value="75" :name="'SCORE 2'" :color="'#00ff00'"></ItemOne2>
        </ItemPage>
        <!-- <el-divider /> -->
        <hr class="hr-dashed2" style="margin-top: 1px; margin-bottom: 1px;width: 380px;">
        <ItemPage class="item-pai">
          <ItemTwo></ItemTwo>
        </ItemPage>
        <hr class="hr-dashed2" style="margin-top: 1px; margin-bottom: 1px;width: 380px;padding-bottom: 10px;">
        <ItemPage class="item-zx">
          <ItemThree></ItemThree>
        </ItemPage>
      </section>
      <!-- 中间部分 -->
      <section class="itemCenter">
        <MapPage class="map-page"></MapPage>
        <ItemPage class="item-seven" style="margin-left: -20px;">
          <ItemSeven style="background-color: rgba(23,13,0,0.6)"></ItemSeven>
        </ItemPage>
      </section>
      <!-- 右边部分 -->
      <section class="itemRight sci-fi-border">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <ItemPage class="chart1" style="margin-top: 10px;">
          <ItemFour></ItemFour>
        </ItemPage>
        <hr class="hr-dashed2" style="margin-top: 1px; margin-bottom: 1px;width: 380px;padding-bottom: 1px;">
        <ItemPage class="chart2">
          <ItemFive></ItemFive>
        </ItemPage>
        <hr class="hr-dashed2" style="margin-top: 1px; margin-bottom: 1px;width: 380px;padding-bottom: 1px;">
        <ItemPage class="chart3">
          <ItemSix></ItemSix>
        </ItemPage>
      </section>
    </section>
  </div>
</template>

<script setup>
import { onMounted, nextTick } from 'vue';
import ItemPage from '@/components/data/itemPage.vue';
import ItemOne1 from '@/components/data/itemOne-1.vue';
import ItemOne2 from '@/components/data/itemOne-2.vue';
import ItemTwo from '@/components/data/itemTwo.vue';
import ItemThree from '@/components/data/itemThree.vue';
import ItemFour from '@/components/data/itemFour.vue';
import ItemFive from '@/components/data/itemFive.vue';
import ItemSix from '@/components/data/itemSix.vue';
import ItemSeven from '@/components/data/itemSeven.vue';
import MapPage from '@/components/data/mapPage.vue';
import { inject } from 'vue';

// 假设$echart被正确注入
let $echart = inject('echarts');
let $http = inject('axios');

// 检查并切换深色模式
if ($echart && $echart.darkMode) {
  document.querySelector('.app').classList.add('dark-mode');
}

const updateDateTime = () => {
  const now = new Date();
  const dateTimeStr = now.toLocaleString();
  const datetimeElement = document.querySelector('.datetime');
  if (datetimeElement) {
    datetimeElement.textContent = dateTimeStr;
  } else {
  }
};

onMounted(() => {
  nextTick(() => {
    updateDateTime();
    setInterval(updateDateTime, 1000);
  });
});

console.log($echart);
console.log($http);
</script>

<style scoped>
/* 头部样式 */
header.cool-header {
  height: 5%;
  width: 100%;
  background-color: #001e48;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  position: relative;
  overflow: hidden;
}

header.cool-header::before,
header.cool-header::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: animate 5s infinite linear;
}

header.cool-header::before {
  top: -100%;
  left: -100%;
}

header.cool-header::after {
  bottom: -100%;
  right: -100%;
  animation-direction: reverse;
}

@keyframes animate {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 50%);
  }
}

h4 {
  font-size: 16px;
  text-align: center;
  color: #fff; /* 设置标题文字颜色为白色 */
  margin-left: 43.2%;
}

.datetime {
  font-size: 14px;
  color: #fff; /* 设置日期和时间文字颜色为白色 */
}

.app {
  height: 100%;
  width: 100%;
}

/* 深色模式样式 */
.app.dark {
  background-image: url('@/assets/img/R.jpg');
  color: #fff; /* 设置背景颜色为深蓝色，文字颜色为白色 */
}

.container {
  margin: 0 auto;
  display: flex;
  height: 95%;
  width: 100%;
}

.itemLeft {background-color: rgba(23,13,0,0.6)}
.itemRight {
    background-color: rgba(23,13,0,0.6);
  display: flex;
  flex: 3;
  height: 95%;
  flex-direction: column;
}

.item-pai {
  flex: 1;
}

.item-zx {
  flex: 1;
}

.itemCenter {
  flex: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.item-double-gauge {
  display: flex;
}

.map-page {
    background-color: rgba(23,13,0,0.6);
    /* opactity: 0.1; */
  width: 100%;
  flex: 1;
  margin-top: 50px;
}

.item-seven {
  width: calc(100% - 50px);
  margin-top: 20px;
}

/* 科技风边框样式 */
.sci-fi-border {
  position: relative;
  height: 95%; /* 调整高度 */
  margin: 1%; /* 增加外边距 */
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid #2a3cad;
  color: white;
}

.sci-fi-border span {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
}

.sci-fi-border span:nth-child(1) {
  transform: rotate(0deg);
}

.sci-fi-border span:nth-child(2) {
  transform: rotate(90deg);
}

.sci-fi-border span:nth-child(3) {
  transform: rotate(180deg);
}

.sci-fi-border span:nth-child(4) {
  transform: rotate(270deg);
}

.sci-fi-border span:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.1% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

.hr-dashed2 {
    border: 0;
    position: relative;
    margin-top: 1px;
    margin-bottom: 1px;
    width: 380px;
    padding-bottom: 1px;
    height: 0;
  }

  .hr-dashed2::before,
  .hr-dashed2::after {
    content: "";
    position: absolute;
    border-top: 2px dashed #a2a9b6;
    width: 80%; /* 左右细线的长度 */
    top: 50%;
    transform: translateY(-50%);
  }

  .hr-dashed2::before {
    left: 0;
  }

  .hr-dashed2::after {
    right: 0;
  }

  .hr-dashed2::middle {
    border-top: 4px dashed #a2a9b6; /* 中间粗线 */
    position: absolute;
    width: 40%; /* 中间粗线的长度 */
    left: 30%;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
